<template>
	<div id="my">
		<header>
			<i class="iconfont">&#xe64e;</i>
			<h1>我的</h1>
		</header>
		<section>
			<div class="s-index">
				<i class="iconfont i_1">&#xe63d;</i>
				<router-link to='./Login'><h2>{{username}}</h2></router-link>
				<p>
					<i class="iconfont">&#xe675;</i>登录后享受更多特权</p>
				<i class="iconfont i_2">&#xe612;</i>
			</div>
		</section>
		<div class="tab">
			<a>
				<p><i class="iconfont tab_2">&#xe601;</i></p>
				<p>优惠</p>
			</a>
			<a>
				<p><i class="iconfont tab_1">&#xe625;</i></p>
				<p>积分</p>
			</a>
		</div>
		<div class="list">
			<a>
				<i class="iconfont list_1">&#xe67f;</i>
				<div>
					我的订单
					<i class="iconfont">&#xe612;</i>
				</div>
			</a>
			<a>
				<i class="iconfont list_2">&#xe680;</i>
				<div>
					积分商城
					<i class="iconfont">&#xe612;</i>
				</div>
			</a>
			<a>
				<i class="iconfont list_3">&#xe64c;</i>
				<div>
					饿了么会员卡
					<i class="iconfont">&#xe612;</i>
				</div>
			</a>
		</div>
		<div class="list">
			<a>
				<i class="iconfont list_1">&#xe60f;</i>
				<div>
					服务中心
					<i class="iconfont">&#xe612;</i>
				</div>
			</a>
			<a>
				<i class="iconfont list_4">&#xe600;</i>
				<div>
					下载饿了么APP
					<i class="iconfont">&#xe612;</i>
				</div>
			</a>
			
		</div>
		<Footerr></Footerr>
	</div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import Footerr from './Footerr';
export default {
	computed:{
    
	...mapState(['username'])
     },
	components: {
		Footerr,
	},
	update:function(){
		username = this.$store.state.username
	}
}
</script>

<style lang="scss" scoped>
@import '../../static/hotcss/px2rem.scss';
#my{
	background: #f5f5f5;
}
header {
	height: px2rem(88);
	background: #0085ff;
	color: #fff;
	i {
		float: left;
		line-height: px2rem(88);
		margin-left: px2rem(10);
		font-size: px2rem(34);
	}
	h1 {
		display: inline-block;
		margin-left: -45px;
		position: absolute;
		top: 0;
		left: 50%;
		line-height: px2rem(88);
		font-weight: 300;
		font-size: px2rem(45);
	}
}

.s-index {
	width: px2rem(750);
	height: px2rem(220);
	padding: px2rem(50) px2rem(30) px2rem(50) px2rem(30);
	background: #0085ff;
	color: #fff;
	.i_1 {
		font-size: px2rem(120);
		color: #ccc;
		float: left;
		margin-right: px2rem(30);
		background: #fff;
		height: px2rem(120);
		border-radius: 50%;
	}
	h2 {
		margin-top: px2rem(5);
		float: left;
		width: px2rem(400);
		font-size: px2rem(52);
		font-family: 'Helvetica Neue', Tahoma, Arial, PingFangSC-Regular, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
		font-weight: 300;
		color: #fff;
	}
	p {
		float: left;
		font-size: px2rem(33);
		line-height: px2rem(35);
		margin-top: px2rem(10);
		i {
			font-size: 27px;
			position: relative;
			top: -3px;
		}
	}
	.i_2 {
		float: right;
		margin-top: px2rem(-10);
	}
}

.tab {
	display: table;
	width: 100%;
	height: px2rem(168);
	border-bottom: 1px solid #ddd;
	background-color: #fff;
	a {
		width: px2rem(375);
		height: px2rem(167);
		display: table-cell;
		width: 33.3333%;
		vertical-align: middle;
		text-align: center;
		border-right: 1px solid #ddd;
		overflow: hidden;
		p:nth-child(1) i{
		margin-top: px2rem(20);
		}
		p:nth-child(2){
			font-size: px2rem(24);
			margin-top: pxe2rem(5);
		}
	}
	.tab_1{
		border-radius: 50%;
		color: rgb(106, 194, 11);
		font-size: px2rem(55);	
		margin-top: px2rem(40);
	}
	.tab_2{
		border-radius: 50%;
		color: rgb(255, 95, 62);
		font-size: px2rem(70);		
	}
}
.list{
	margin-top: 0.526667rem;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
	a{
		display: block;
		height: px2rem(84);
		i:nth-child(1){
			font-size: px2rem(35);
			float: left;
			margin-left: px2rem(30);
			line-height: px2rem(84);
			margin-right: px2rem(30);
		}
		div:nth-child(2){
			float: left;
			border-bottom: 1px solid #ddd;
			height: px2rem(84);
			width: px2rem(654);
			font-size: px2rem(34);
			line-height: px2rem(84);
			i{
				float: right;
				color: #ddd;
			}
		}
	}
}
.list_1{
	color: rgb(74, 165, 240);
}
.list_2{
	color: rgb(252, 123, 83);
}
.list_3{
	color: rgb(255, 198, 54);
}
.list_4{
	color: rgb(74, 165, 240);
}
</style>


